<script setup lang="ts">
  import { PropType, ref, watch } from 'vue'
  import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'

  defineOptions({
    name: 'FilePreviewModal',
  })

  const props = defineProps({
    fileUrlList: {
      type: Array as PropType<Array<string>>,
      default: () => [],
    },
    fileType: {
      type: String as PropType<'video' | 'pdf'>,
      default: () => 'video',
    },
    fileIndex: {
      type: Number,
      default: () => 0,
    },
  })

  // 弹窗显示状态
  const visible = defineModel('modelValue', { type: Boolean, default: false })

  // 正在预览的文件的索引
  const visitingIndex = ref(0)

  /**
   * 预览弹窗关闭事件
   */
  const onClose = () => {
    visible.value = false
    visitingIndex.value = 0
  }

  watch(visible, (value) => {
    if (value) {
      visitingIndex.value = props.fileIndex
    }
  })
</script>

<template>
  <h-dialog v-model="visible" title="文件预览" :width="800" @close="onClose">
    <div style="display: flex; align-items: center; gap: 12px; justify-content: center">
      <el-button
        type="primary"
        :disabled="visitingIndex === 0"
        :icon="ArrowLeftBold"
        style="padding: 0 14px"
        @click="visitingIndex--"
      />
      <video
        v-if="props.fileType === 'video'"
        :src="props.fileUrlList[visitingIndex]"
        controls
        width="600"
      ></video>
      <iframe v-else :src="props.fileUrlList[visitingIndex]" width="600" height="500"></iframe>
      <el-button
        type="primary"
        :disabled="visitingIndex === props.fileUrlList.length - 1"
        :icon="ArrowRightBold"
        style="padding: 0 14px"
        @click="visitingIndex++"
      />
    </div>
  </h-dialog>
</template>
